<nav class="fixed top-0 left-0 right-0 z-50 bg-cyber-dark bg-opacity-80 backdrop-blur-sm border-b border-cyber-blue border-opacity-30 transition-all duration-300 transform-gpu" id="mainNav">
    <div class="container mx-auto px-4 sm:px-5 py-4 flex justify-between items-center max-w-6xl">
        <a href="/" class="font-orbitron text-xl text-white no-underline group relative overflow-hidden">
            <span class="neon-text">模库</span> 
            <span class="text-cyber-blue font-bold">Templio</span>
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-cyber-blue transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        </a>
        <div class="space-x-6">
            <a href="/templates" class="font-rajdhani text-gray-300 hover:text-cyber-blue transition-colors duration-300 relative group">
                全部模板
                <span class="absolute bottom-0 left-0 w-full h-0.5 bg-cyber-blue transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
            </a>
            <!-- <a href="/templates?category=1" class="text-gray-600 hover:text-blue-500 transition-colors">网站模板</a> -->
        </div>
    </div>
</nav>

<!-- 装饰性元素 - 数据流底线 -->
<div class="fixed top-[60px] left-0 right-0 z-50 transition-all duration-300 overflow-hidden" id="topLight" style="height: 2px">
    <!-- 主要线条 -->
    <div class="w-full h-px bg-gradient-to-r from-transparent via-cyber-blue to-transparent relative"></div>
    <!-- 跑马灯数据流效果 -->
    <div id="dataStream" class="absolute top-0 left-0 right-0 h-px flex space-x-1 opacity-70"></div>
</div>

<!-- 导航占位，防止内容被固定导航遮挡 -->
<div class="h-16"></div>

<!-- 添加滚动效果的JavaScript -->
<script>
window.addEventListener('DOMContentLoaded', () => {
    const nav = document.getElementById('mainNav');
    const topLight = document.getElementById('topLight');
    const dataStream = document.getElementById('dataStream');
    let lastScrollY = window.scrollY;
    let ticking = false;
    
    // 创建数据流效果
    const createDataFlow = () => {
        dataStream.innerHTML = '';
        // 创建随机宽度的数据片段
        const screenWidth = window.innerWidth;
        let currentPosition = 0;
        
        while (currentPosition < screenWidth) {
            const segment = document.createElement('div');
            const width = Math.floor(Math.random() * 20) + 5; // 5-25px宽度
            const isGap = Math.random() > 0.7;
            
            if (!isGap) {
                segment.className = 'h-full bg-cyber-blue';
                segment.style.width = `${width}px`;
                segment.style.opacity = (Math.random() * 0.5 + 0.5).toFixed(2); // 50%-100%不透明度
                dataStream.appendChild(segment);
            }
            
            currentPosition += width + 1;
        }
        
        // 添加动画
        dataStream.style.animation = 'dataFlow 8s linear infinite';
    };
    
    // 添加动画样式
    const styleSheet = document.createElement('style');
    styleSheet.textContent = `
        @keyframes dataFlow {
            0% { transform: translateX(0); }
            100% { transform: translateX(100%); }
        }
        @keyframes pulse {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; }
        }
    `;
    document.head.appendChild(styleSheet);
    
    // 优化滚动处理性能
    const updateNav = () => {
        const currentScrollY = window.scrollY;
        
        // 导航栏始终保持可见，只是风格变化
        if (currentScrollY < 50) {
            // 在顶部时，完整显示
            nav.style.transform = 'translateY(0)';
            nav.style.borderBottomColor = 'rgba(0, 240, 255, 0.3)';
            nav.classList.remove('py-2', 'bg-opacity-95', 'shadow-neon-blue');
            nav.classList.add('py-4', 'bg-opacity-80');
            topLight.style.transform = 'translateY(0)';
            topLight.style.animation = 'pulse 2s ease-in-out infinite';
        } else {
            // 滚动后，使用紧凑样式，增加发光边框效果
            nav.style.transform = 'translateY(0)';
            nav.style.borderBottomColor = 'rgba(0, 240, 255, 0.8)';
            nav.classList.add('py-2', 'bg-opacity-95', 'shadow-neon-blue');
            nav.classList.remove('py-4', 'bg-opacity-80');
            topLight.style.transform = 'translateY(0)';
            topLight.style.animation = 'pulse 1.5s ease-in-out infinite';
        }
        
        lastScrollY = currentScrollY;
        ticking = false;
    };
    
    // 使用requestAnimationFrame优化滚动性能
    window.addEventListener('scroll', () => {
        if (!ticking) {
            window.requestAnimationFrame(updateNav);
            ticking = true;
        }
    });
    
    // 初始化数据流和状态
    createDataFlow();
    updateNav();
    
    // 窗口大小改变时重新创建数据流
    window.addEventListener('resize', createDataFlow);
});
</script> 